export interface Refs {
  menuTree: YvanUI.CtlTree
  tt: YvanUI.CtlTab
  headerMenu: YvanUI.CtlMenu
}

export default abstract class <M, INP> extends YvanUI.BaseModule<M, Refs, INP> {
  query = {
    menuFilter: '',
  };

  viewResolver(): any {
    return {
      css:'main',
      rows: [
        {
          view: "toolbar",
          height: 71,
          css: 'mainHeader',
          borderless: true,
          cols:[
            {
                css:'mainHeaderLeft',
                width:260,
                rows:[{
                    view: "template",
                    borderless: true,
                    css:'mainHeaderLogo',
                    template: '<h2 style="padding-left: 50px;">YvanUI示例</h2>'
                }]
            },
            {
                css:'mainHeaderRight',
                cols:[
                    {},
                    {
                      view: "menu",
                      width: 150,
                      ctlName: 'headerMenu',
                      css: 'headerMenu',
                      onMenuItemClick:{
                        type:'function',
                        bind:'changeTheme',
                      },
                      type: {
                        subsign: true,
                      },
                      data: []
                    }
                ]
            }
        ]
        },
        {
          css:'mainBox',
          cols: [
              {
                  width:260,
                  css: 'mainLeft',
                  rows:[
                      {
                          css:'mainLeftBox',
                          rows:[
                              {
                                  css:'mainLeftPosition',
                              },
                              {
                                  view: "form",
                                  height:42,
                                  type: "line",
                                  rows: [
                                      {
                                          view: "text",
                                          prompt: "功能筛选",
                                          entityName: 'query.menuFilter',
                                          changeValueImplete: true
                                      }
                                  ]
                              },
                              {
                                  view: "tree",
                                  select: "multiselect",
                                  // drag: "move",
                                  ctlName: 'menuTree',
                                  onDataComplete: {
                                      type: "function",
                                      bind: "menuLoadFinish"
                                  },
                                  dataSource: {
                                      type: "function",
                                      bind: "getMenu",
                                      displayField: 'text',
                                      valueField: 'id',
                                      parentField: 'parentId'
                                  },
                                  onNodeClick: {
                                      type: 'function',
                                      bind: 'menuNodeClick'
                                  },
                              }
                          ] 
                      }
                  ]
              },
              {view: 'resizer',width:10},
              {
                  view: "tabview",
                  css: "maintab",
                  ctlName: "tt",
                  id: 'tt',
                  onRender: {
                      type: 'function',
                      bind: 'ttOnRender'
                  },
                  onTabChanged: {
                      type: "function",
                      bind: "ttOnTabChanged",
                  },
                  animate: false,
                  tabbarContextMenu: [
                      {
                          text: "关闭",
                          onClick: {
                              type: "function",
                              bind: "closeMe",
                          },
                      },
                      "-",
                      {
                          text: "关闭其他",
                          onClick: {
                              type: "function",
                              bind: "closeOther",
                          },
                      },
                      {
                          text: "全部关闭",
                          onClick: {
                              type: "function",
                              bind: "closeAll",
                          },
                      },
                  ],
                  tabbar: {
                      // close: true,
                      popupWidth: 300,
                      optionWidth: 120,
                      tabMinWidth: 120,
                  },
                  cells: [
                      {
                          header: `<div class="myTabDiv">首页</div>`,
                          close: false,
                          body: {
                              id: "MainWindowFirstPage",
                              template: "你好",
                          },
                      },
                  ],
              },
          ],
      }
      ]
    };
  }
}